:root{
      --text:#171717; --muted:#5d5f66; --bg:#ffffff; --panel:#f4f5f6;
      --line:#e7e8ea; --accent:#101010; --radius:14px; --max:1200px;
      --shadow:0 12px 30px rgba(0,0,0,.06);
      --nav-glass: rgba(255,255,255,.72); --nav-line: rgba(15,18,28,.12);
      --nav-shadow: 0 8px 30px rgba(15,18,28,.08);
      --grad-1:#86b9ff; --grad-2:#ffd580; --grad-3:#a9ffcb;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth; overflow-x: hidden;}
    body{
      margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased; overflow-x: hidden;
    }
    .container{max-width:var(--max);margin:0 auto;padding:0 24px}

    /* ===== Header (matches your site) ===== */
    .header-fx{position:sticky;top:0;z-index:1000;backdrop-filter: blur(10px) saturate(140%);background:var(--nav-glass);border-bottom:1px solid var(--nav-line);box-shadow:var(--nav-shadow);transition:background .2s ease}
    .header-fx::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--grad-1),var(--grad-2),var(--grad-3))}
    .navfx{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:height .22s ease}
    .brandfx{display:flex;align-items:center;gap:12px;text-decoration:none;color:#111}
    .brandfx img{width:auto;height:30px;object-fit:contain;transition:width .22s ease,height .22s ease}
    .brandfx b{font-weight:900;letter-spacing:.5px}
    .header-fx.shrink .navfx{height:64px} .header-fx.shrink .brandfx img{width:66px;height:24px}
    .navfx-links{display:flex;align-items:center;gap:28px} .navfx-links>*{display:flex;align-items:center}
    .linkfx,.triggerfx{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 2px;background:none;border:0;cursor:pointer;font-weight:800;color:#0f121c;text-decoration:none}
    .linkfx::after{content:"";position:absolute;left:0;bottom:6px;height:2px;width:0;background:#111;transition:width .22s ease}
    .linkfx:hover::after{width:100%}
    .iconfx{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--nav-line);border-radius:10px;background:#fff;transition:height .22s ease,width .22s ease}
    .ctafx{height:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#111;color:#fff;font-weight:900;text-decoration:none;transition:height .22s ease}
    .header-fx.shrink .iconfx{width:46px;height:46px} .header-fx.shrink .ctafx{height:46px}
    .spotlight{position:absolute;inset:0;pointer-events:none} .spotlight::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(120px 120px at center,rgba(14,18,28,.07),transparent 70%);transform:translate(-50%,-50%);left:var(--mx,50%);top:var(--my,50%);transition:left .15s ease,top .15s ease}

   /* Mobile drawer */
    .burgerfx{display:none; gap:8px; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative}
    .burgerfx span,.burgerfx::before,.burgerfx::after{
      content:""; position:absolute; left:10px; right:10px; height:2px; background:#111; border-radius:2px; transition:.2s ease
    }
    .burgerfx span{ top:21px }
    .burgerfx::before{ top:14px }
    .burgerfx::after{ top:28px }
    .burgerfx[aria-expanded="true"]::before{ transform:translateY(7px) rotate(45deg) }
    .burgerfx[aria-expanded="true"]::after{ transform:translateY(-7px) rotate(-45deg) }
    .burgerfx[aria-expanded="true"] span{ opacity:0 }

    @media (max-width: 980px){
      .navfx-links{display:none}
      .burgerfx{display:block}
    }
    .backdrop{position:fixed; inset:0; background:rgba(10,12,16,.38); backdrop-filter:blur(4px);
      opacity:0; pointer-events:none; transition:.2s ease; z-index:998}
    .backdrop.show{opacity:1; pointer-events:auto}
    .drawer{
      position:fixed; inset:0 0 0 auto; width:min(420px,86vw); background:linear-gradient(180deg,#11151d,#0c0f15);
      border-left:1px solid rgba(255,255,255,.08); color:#eaecef; transform:translateX(102%);
      transition:.24s cubic-bezier(.2,.8,.16,1); z-index:999; display:flex; flex-direction:column;
    }
    .drawer.show{ transform:none }
    .drawtop{
      display:flex; align-items:center; gap:10px; padding:27px 18px; border-bottom:1px solid rgba(255,255,255,.08);
    }
    .drawtop img{width:26px;height:26px}
    .drawmenu{
        display: grid;
    gap: 12px;
    padding: 16px 18px 26px;
    background-color: #fff;
    }
    .drawmenu a{display:block; padding:14px; border-radius:12px; text-decoration:none; font-weight:800; color:#eaecef;
      background:#171c26; border:1px solid rgba(255,255,255,.06)}
    details.msub{border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; background:#161b25}
    details.msub > summary{list-style:none; padding:14px; cursor:pointer; font-weight:900; display:flex; align-items:center; justify-content:space-between}
    details.msub > summary::-webkit-details-marker{display:none}
    details.msub[open] > summary{ background:#121723 }
    .mlinks{display:grid; gap:10px; padding:10px 12px 14px}
    .mlinks a{background:#121723; border:1px solid rgba(255,255,255,.06)}




    /* ===== Page hero ===== */
    .page-hero{display:grid;grid-template-columns:1.15fr .85fr;border-top:1px solid var(--line)}
    .page-copy{background:var(--panel);padding: clamp(28px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center}
    .eyebrow{color:#8c9096;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;display:inline-flex;gap:12px;align-items:center}
    .eyebrow::before{content:"";width:42px;height:1px;background:#c8ccd3}
    .page-title{margin:16px 0 10px;font-weight:900;line-height:1.04;text-transform:uppercase;letter-spacing:.01em;font-size: clamp(2rem, 5.2vw, 3.6rem)}
    .page-sub{color:var(--muted);line-height:1.75;max-width:62ch}
    .page-media{position:relative;min-height:420px;overflow:hidden}
    .page-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

    /* ===== Content blocks ===== */
    .section{padding: clamp(38px,6vw,72px) 0;border-top:1px solid var(--line);background:#fff}
    .lead{font-weight:800;font-size: clamp(1.2rem,1.2vw + .8rem,1.6rem);line-height:1.5;max-width:60ch;color:#1a1a1a}
    .columns{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
    @media (max-width:960px){.page-hero{grid-template-columns:1fr}.page-media{height:42vh}.columns{grid-template-columns:1fr}}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
    @media (max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.gallery{grid-template-columns:1fr}}
    .shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
    .shot img{width:100%;height:280px;object-fit:cover;display:block;transition:transform .6s ease, filter .4s ease}
    .shot:hover img{transform:scale(1.04);filter:saturate(1.05) contrast(1.02)}
    .cap{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:8px;font-weight:800}

    /* Cards */
    .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
    .check{display:grid;gap:10px;margin:0}
    .check li{list-style:none;padding-left:28px;position:relative}
    .check li::before{content:"✓";position:absolute;left:0;top:0;color:#111;font-weight:900}

    /* Service area */
    .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
    @media (max-width:900px){.areas{grid-template-columns:repeat(2,1fr)}}
    .area{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;font-weight:800}

    /* FAQ */
    .faq{display:grid;gap:12px;margin-top:16px}
    .q{background:#fff;border:1px solid var(--line);border-radius:10px}
    .q summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800}
    .q summary::-webkit-details-marker{display:none}
    .q[open] summary{background:#f7f7f8}
    .q div{padding:0 16px 16px;color:var(--muted);line-height:1.7}

    /* CTA band & footer */
    .cta-band{background:var(--panel);border-top:1px solid var(--line);padding: clamp(32px,5.5vw,64px) 0;text-align:center}
    .btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:10px;background:#111;color:#fff;text-decoration:none;font-weight:900;border:1px solid #000}
    .mini{border-top:1px solid var(--line);color:#8a8d93;text-align:center;padding:28px 0 46px}

    /* Back to top */
    .to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;border:1px solid #000;box-shadow:0 10px 24px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:.22s ease;z-index:1001}
    .to-top.show{opacity:1;transform:none;pointer-events:auto}


    /*DROP DOWN*/
   .groupfx{position:relative;}
    .triggerfx svg{width:14px;height:14px; transition:transform .18s ease}
    .groupfx[aria-expanded="true"] .triggerfx svg{ transform:rotate(180deg) }

    .dropdownfx{
      position:absolute; top:100%; left:50%; transform:translate(-50%,-8px) scale(.98);
      width:min(680px,94vw); padding:14px; border-radius:16px; color:#eaecef;
      background: linear-gradient(180deg,#0f1116,#0c0f14);
      border:1px solid rgba(255,255,255,.06);
      box-shadow: 0 24px 60px rgba(15,18,28,.32);
      opacity:0; pointer-events:none; transition:.2s ease;
    }
    .groupfx::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px}
    .dropdownfx.open{opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1)}
    .drophead{display:flex; align-items:center; justify-content:space-between; color:#9aa0a6; font-weight:700; padding:4px 6px 10px}
    .dropgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
    .dropitem{
    display: inline-block;
    padding: 29px;
    border-radius: 12px;
    text-decoration: none;
    color: #f5f6f8;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
    }
    .dropitem:hover{ background:rgba(255,255,255,.06) }
    .dropic{
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 12px;
    }
    .dropic svg{width:18px;height:18px; fill:#fff}
    .dropitem small{color:#b4bac4; line-height:1.55}
/**/



    .breadcrumbs{border-top:1px solid var(--line);background:#fff}
    .breadcrumbs .trail{max-width:var(--max);margin:0 auto;padding:10px 24px;font-size:.92rem}
    .breadcrumbs a{color:#111;text-decoration:none;font-weight:700}
    .breadcrumbs span{color:var(--muted)}